<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猜数字首页</title>
    <style>
        nav{
            text-align: center;
            color: mediumaquamarine;
            font-family: 楷体;
        }
        main{
            position: relative;
            width: 100%;
        }
        main>div{
            width: 600px;
            margin:0 auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <nav>
        {# {{ 取传递过来的变量的值 }} #}
        <h3>欢迎{{ name }}来猜数字游戏</h3>
        <h3>年龄: {{ age }}</h3>
        <h3>电话: {{ phone }}</h3>
        {# 模板中的for循环 #}
        {% for name in names %}
            {# 取出列表中的每一个元素 #}
            <h3>{{ name }}</h3>
        {# endfor 表示for 循环结束 #}
        {% endfor %}
    </nav>
    <main>
        <div>
            {# action 表单提交的路由地址 method 指定提交的方式 默认get #}
            <form action="/guess/" method="post">
                {# csrf_token 提交token 验证 #}
                {% csrf_token %}
                {#  placeholder 占位字符 name 表单数据对应的key#}
                <input name="gus_num" type="text" placeholder="请输入你猜的数字"><br>
                <button type="submit">提交</button>
            </form>
            <h3>{{ result }}</h3>
        </div>
    </main>
</body>
</html>